<template>
	<u-popup v-model="oneShow" mode="bottom" @close='close'>
		<view class="draw-one-pop">
			<view class="one-pop-title">
				<text>发布出售</text>
			</view>
			<view class="one-pop-first" @click="open">
				<view class="one-pop-left">
					<image v-if="list[current]" :src="$util.img(list[current].icon)" mode="widthFix"></image>
					<text>潮卡</text>
				</view>
				<view class="one-pop-right">
					<text>修改</text>
					<u-icon name='arrow-right' color='#000' size='24'></u-icon>
				</view>
			</view>
			<view class="one-pop-secoed">
				<view class="pop-secoed-left">
					<view class="pop-sell">
						<text>出售数量</text>
					</view>
					<view class="pop-sell-image" >
						<image v-if="list[current]" :src="$util.img(list[current].icon)" mode="widthFix"></image>
						<text>*1</text>
					</view>
				</view>
				<view class="line"></view>
				<view class="pop-secoed-right">
					<view class="pop-price">
						<text>出售单价</text>
					</view>
					<view class="pop-price-input">
						<input type="number" placeholder="请输入出售价格" v-model="amount"/>
					</view>
				</view>
			</view>
			<view class="new-market">
				<text class="market-num">可出售数量：{{ list[current] ? list[current].surplus_num : ''}}</text>
				<view class="see-market" @click="openMarker">市场价格</view>
			</view>
			<view class="new-flex">
				<text>1.只有停止挖矿的潮卡才可发布出售；</text>
				<text>2.上架后，无法对其进行销毁、赠送等操作；</text>
				<text>3.交易额度的10%会作为服务费扣除，给创作者贡献收益</text>
			</view>
			<view class="pop-btn">
				<u-button class="primary" @click="btn" ripple-bg-color="rgba(0,0,0,.4)" 
				:ripple="true">确认发布</u-button>
			</view>
		</view>
		<diy-draw-two :show='twoShow' @close='twoClose' ref='draw' @setitem='setitem'></diy-draw-two>
	</u-popup>
</template>

<script>
	import diyDrawTwo from "@/components/diy-draw-two/diy-draw-two.vue";
	export default {
		components: {
			diyDrawTwo
		},
		props: {
			show: {
				type: [String, Boolean],
				default: false
			}
		},
		watch: {
			show: {
				handler(newval, oldVal) {
					this.oneShow = this.show;
				},
				immediate: true
			}
		},
		mounted() {
			
			this.getinfo();
		},
		data() {
			return {
				oneShow: false,
				num: 0,
				// 第二个弹出层
				twoShow: false,
				current:0, //出售那个潮卡
				amount:'' ,//出售潮卡的单价
				list:[]
			}
		},
		methods:{
			close(){
				this.$emit('close')
			},
			//页面数据
			getinfo(){
				this.$http.asyncSendrequest({
					url:'/profile/myCard',
					success:res=>{
						this.list = res.data;
					}
				})
			},
			//打开另外的一个弹窗
			open(){
				this.$refs.draw.setinfo(this.list);
			},
			//获取修改的卡片数据
			setitem(index){
				this.current = index;
			},
			twoClose(){
				this.twoShow = false;
			},
			openMarker(){
				this.$emit("openMarker")
			},
			//点击出售
			btn(){
				this.$http.asyncSendrequest({
					url:'/order/sellHandle',
					data:{
						num:1,
						amount:this.amount,
						card_id:this.list[this.current].id
					},
					success:res=>{
						this.$util.taost({
							title:res.msg,
							callback:v=>{
								this.amount = 0;
								this.getinfo();
								this.$forceUpdate()
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.draw-one-pop{
		width: 100%;
		height: 65vh;
		background: #F7F8FA;
		border-radius: 20rpx 20rpx 0px 0px;
		padding: 30rpx;
		.one-pop-title{
			margin: 0 0 30rpx;
			padding-top: 30rpx;
			text{
				font-size: 38rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #000000;
			}
		}
		.one-pop-first{
			padding: 0 20rpx;
			border: 1px solid #000000;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.one-pop-left{
				display: flex;
				align-items: center;
				padding: 10rpx 0;
				image{
					width: 60rpx;
					margin-right: 20rpx;
				}
				.title{
					width: 200rpx;
					margin-left: 10rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #000000;
				}
			}
			.one-pop-right{
				display: flex;
				align-items: center;
				text{
					margin-right: 10rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #000000;
				}
			}
		}
		.one-pop-secoed{
			margin:30rpx 0;
			padding: 20rpx 20rpx;
			border: 1px solid #000000;
			border-radius: 10rpx;
			display: flex;
			justify-content: space-between;
			.pop-secoed-left{
				width: 35%;
				.pop-sell{
					margin-bottom: 20rpx;
					text{
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #000000;
					}
				}
				.pop-sell-image{
					image{
						width: 80rpx;
						height: 80rpx;
						margin-right: 20rpx;
					}
					text{
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #000000;
					}
				}
			}
			.line{
				width: 1rpx;
				height: 150rpx;
				border: 1px solid #000000;
				opacity: 0.3;
			}
			.pop-secoed-right{
				width: 40%;
				.pop-price{
					margin-bottom: 20rpx;
					text{
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #000000;
					}
				}
				.pop-price-input{
					margin-top: 60rpx;
					input{
						font-size: 26rpx;
					}
				}
			}
		}
		.new-market{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.market-num{
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
			}
			.see-market{
				width: 160rpx;
				height: 50rpx;
				line-height: 50rpx;
				background: #000000;
				border-radius: 10rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
		.new-flex{
			margin: 20rpx 0 0 0;
			display: flex;
			flex-direction: column;
			text{
				margin-top: 10rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
			}
		}
		.pop-btn{
			margin:40rpx 0 0 0;
			.primary{
				height: 95rpx;
				background: #292929;
				border-radius: 10rpx;
				text-align: center;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #fff;
			}
		}
	}
</style>